<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>iconfont Demo</title>

  <link rel="stylesheet" href="iconfont.css">
  <style>
    .main .logo {
      margin-top: 0;
      height: auto;
    }

    .main .logo a {
      display: flex;
      align-items: center;
    }

    .main .logo .sub-title {
      margin-left: 0.5em;
      font-size: 22px;
      color: #fff;
      background: linear-gradient(-45deg, #3967FF, #B500FE);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  </style>
</head>
<body>
  <div class="main">


    <div class="">
      <div class="content font-class active">
        <ul class="icon_lists dib-box">
          
          <li class="dib">
            <span class="icon iconfont icon-zhuanzhang"></span>
            <div class="name">
              转账
            </div>
            <div class="code-name">.icon-zhuanzhang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tupian"></span>
            <div class="name">
              图片
            </div>
            <div class="code-name">.icon-tupian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-sop_fruits"></span>
            <div class="name">
              sop_fruits
            </div>
            <div class="code-name">.icon-sop_fruits
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shuiguo"></span>
            <div class="name">
              fruit-copy
            </div>
            <div class="code-name">.icon-shuiguo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-delete"></span>
            <div class="name">
              delete
            </div>
            <div class="code-name">.icon-delete
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-delete2"></span>
            <div class="name">
              delete
            </div>
            <div class="code-name">.icon-delete2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-huluobu"></span>
            <div class="name">
              蔬菜
            </div>
            <div class="code-name">.icon-huluobu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shujuxian"></span>
            <div class="name">
              technology_usb-cable
            </div>
            <div class="code-name">.icon-shujuxian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shouqijianpan"></span>
            <div class="name">
              收起键盘
            </div>
            <div class="code-name">.icon-shouqijianpan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shijin"></span>
            <div class="name">
              纸巾
            </div>
            <div class="code-name">.icon-shijin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-plus"></span>
            <div class="name">
              plus
            </div>
            <div class="code-name">.icon-plus
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-wushuju"></span>
            <div class="name">
              无数据
            </div>
            <div class="code-name">.icon-wushuju
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-arrow-right"></span>
            <div class="name">
              arrow-down-copy
            </div>
            <div class="code-name">.icon-arrow-right
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-arrow-left"></span>
            <div class="name">
              arrow-down-copy
            </div>
            <div class="code-name">.icon-arrow-left
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-arrow-down"></span>
            <div class="name">
              arrow-down
            </div>
            <div class="code-name">.icon-arrow-down
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-riliriqi2"></span>
            <div class="name">
              日历 日期2
            </div>
            <div class="code-name">.icon-riliriqi2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-quanbufenlei"></span>
            <div class="name">
              全部分类
            </div>
            <div class="code-name">.icon-quanbufenlei
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon"></span>
            <div class="name">
              提示
            </div>
            <div class="code-name">.icon-icon
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-setting"></span>
            <div class="name">
              设置
            </div>
            <div class="code-name">.icon-setting
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-owner_set"></span>
            <div class="name">
              个性化
            </div>
            <div class="code-name">.icon-owner_set
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-close"></span>
            <div class="name">
              close
            </div>
            <div class="code-name">.icon-close
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-rmb"></span>
            <div class="name">
              人民币
            </div>
            <div class="code-name">.icon-rmb
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-cart"></span>
            <div class="name">
              购物车
            </div>
            <div class="code-name">.icon-cart
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-juhui"></span>
            <div class="name">
              聚会
            </div>
            <div class="code-name">.icon-juhui
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-biji-copy"></span>
            <div class="name">
              笔记
            </div>
            <div class="code-name">.icon-biji-copy
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-feiji"></span>
            <div class="name">
              飞机
            </div>
            <div class="code-name">.icon-feiji
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-dianhua"></span>
            <div class="name">
              电话
            </div>
            <div class="code-name">.icon-dianhua
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jujia1"></span>
            <div class="name">
              居家
            </div>
            <div class="code-name">.icon-jujia1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-hongbao"></span>
            <div class="name">
              红包
            </div>
            <div class="code-name">.icon-hongbao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jianzhi"></span>
            <div class="name">
              兼职
            </div>
            <div class="code-name">.icon-jianzhi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jiaotong"></span>
            <div class="name">
              交通
            </div>
            <div class="code-name">.icon-jiaotong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-lingshi"></span>
            <div class="name">
              零食
            </div>
            <div class="code-name">.icon-lingshi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yule"></span>
            <div class="name">
              娱乐
            </div>
            <div class="code-name">.icon-yule
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zhufang"></span>
            <div class="name">
              住房
            </div>
            <div class="code-name">.icon-zhufang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-gongyi01"></span>
            <div class="name">
              公益
            </div>
            <div class="code-name">.icon-gongyi01
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tubiao-bingtu"></span>
            <div class="name">
              图表-饼图
            </div>
            <div class="code-name">.icon-tubiao-bingtu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-canyin"></span>
            <div class="name">
              餐饮
            </div>
            <div class="code-name">.icon-canyin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-bangongyongpin"></span>
            <div class="name">
              办公用品
            </div>
            <div class="code-name">.icon-bangongyongpin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-gongziqiarenzheng"></span>
            <div class="name">
              工资卡认证
            </div>
            <div class="code-name">.icon-gongziqiarenzheng
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Txu"></span>
            <div class="name">
              T恤
            </div>
            <div class="code-name">.icon-Txu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-qingdianhejuhui-"></span>
            <div class="name">
              庆典和聚会-27
            </div>
            <div class="code-name">.icon-qingdianhejuhui-
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-huazhuangjing"></span>
            <div class="name">
              化妆镜
            </div>
            <div class="code-name">.icon-huazhuangjing
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zhangdan"></span>
            <div class="name">
              账单
            </div>
            <div class="code-name">.icon-zhangdan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yiliao"></span>
            <div class="name">
              医疗
            </div>
            <div class="code-name">.icon-yiliao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-kuaidi1"></span>
            <div class="name">
              快递
            </div>
            <div class="code-name">.icon-kuaidi1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yulebao"></span>
            <div class="name">
              娱乐宝
            </div>
            <div class="code-name">.icon-yulebao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-licai"></span>
            <div class="name">
              理财
            </div>
            <div class="code-name">.icon-licai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-qiche"></span>
            <div class="name">
              001汽车-4
            </div>
            <div class="code-name">.icon-qiche
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jujiashenghuo"></span>
            <div class="name">
              居家生活
            </div>
            <div class="code-name">.icon-jujiashenghuo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-weixiu"></span>
            <div class="name">
              维修
            </div>
            <div class="code-name">.icon-weixiu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xuexi"></span>
            <div class="name">
              学习
            </div>
            <div class="code-name">.icon-xuexi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tubiaozhizuomoban-70"></span>
            <div class="name">
              ylab-quote
            </div>
            <div class="code-name">.icon-tubiaozhizuomoban-70
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-sport"></span>
            <div class="name">
              骑行-01
            </div>
            <div class="code-name">.icon-sport
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zhangbenzhangdanjizhangzhangbu"></span>
            <div class="name">
              账簿
            </div>
            <div class="code-name">.icon-zhangbenzhangdanjizhangzhangbu
            </div>
          </li>
          
        </ul>
        <div class="article markdown">
        <h2 id="font-class-">font-class 引用</h2>
        <hr>

        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
        <p>与 Unicode 使用方式相比，具有如下特点：</p>
        <ul>
          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
</code></pre>
        <blockquote>
          <p>"
            iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
        </blockquote>
      </div>
      </div>
    </div>
  </div>
</body>
</html>
